<template>
  <el-container>
    <el-header class="header">
      <div class="top_left_container">
        <img src="../assets/data_image_png;base….png" alt="">
      </div>
      <div class="top_right_container">
        <a v-for="item in topNav" :key="item.name" :href="item.herf" target="_blank" rel="noopener noreferrer">{{item.name}}</a>
      </div>
    </el-header>
    <el-main>
      <!-- 轮播 -->
      <el-carousel height="640px" direction="vertical" indicator-position="left">
        <el-carousel-item v-for="item in imgBox" :key="item.id" >
          <div :style="{backgroundColor:item.color}">
            <img :src="item.idView" alt="">
            <a class="imgBoxGo" :href="item.web"></a>
          </div>
        </el-carousel-item>
      </el-carousel>
      <!-- 表单 -->
      <div class="main_form">
        <!-- tab -->
        <div class="login_tab" @click="tabClick">
          <img src="../assets/code.png" alt="" v-show="isCode">
          <img src="../assets/computer.png" alt="" v-show="!isCode">
        </div>
        <img class="mimaimg" v-show="!isCode" src="../assets/mima.png" alt="">
        <h3 v-show="isCode">邮箱账号登陆</h3>
        <h3 v-show="!isCode">手机扫码 安全登录</h3>
        <el-form :model="ruleForm" :rules="rules" ref="refForm" label-width="0px" class="login_form" v-show="isCode">
          <el-form-item label="" prop="username">
            <el-input v-model="ruleForm.username" placeholder="邮箱账号或手机号码" prefix-icon="iconfont icon-ren111">
              <template slot="append">@163.com</template>
            </el-input>
          </el-form-item>
          <el-form-item label="" prop="password">
            <el-input v-model="ruleForm.password" type="password" placeholder="输入密码" show-password prefix-icon="iconfont icon-iconset0114"></el-input>
          </el-form-item>
          <el-form-item>
            <div class="login_days">
              <el-checkbox v-model="checked">十天内登陆</el-checkbox>
              <span><a href="https://reg.163.com/naq/findPassword#/verifyAccount">忘记密码?</a></span>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="large" @click="loginClick">登录</el-button>
          </el-form-item>
          <el-form-item>
            <div class="login_app">
              <span><a href="https://mail.163.com/register/index.htm?from=163mail&utm_source=163mail">注册网易邮箱</a></span>
              <span><a href="http://mail.163.com/dashi/?from=mail87&gotodownload=1">邮箱官方App</a></span>
            </div>
          </el-form-item>
        </el-form>
        <div class="sao_div" v-show="!isCode">
          <img src="../assets/wxcode.png" alt="">
          <div>打开 <a href="http://mail.163.com/dashi/?from=mail23&gotodownload=1">网易邮箱大师</a> 扫一扫登录</div>
          <div>
            <a href="" @click="tabClick">密码登录</a> | <a href="https://mail.163.com/register/index.htm?from=163mail">注册新账号</a></div>
        </div>
        <div class="login_guanggao">
          <img src="../assets/gg.png">
          <a href="https://v.mail.163.com/?utm_source=LoginBoxLogoShow_03" ></a>
        </div>
      </div>
    </el-main>

    <el-footer>
      <div class="footer_line1" >
        <a href="https://www.163.com/">网易首页</a>
        <a href="https://you.163.com/">网易严选</a>
        <a href="https://qian.163.com/">网易有钱</a>
        <a href="https://help.mail.163.com/faqDetail.do?code=d7a5dc8471cd0c0e8b4b8f4f8e49998b374173cfe9171305fa1ce630d7f67ac2842e8b50ff6a4ebb">政府公益热线</a>
        <a href="https://reg.163.com/agreement_mobile_ysbh_wap.shtml?v=20171127">隐私政策</a>
        <a href="https://hc.reg.163.com/iTerm/doc.html?id=347">儿童隐私政策</a>
      </div>
      <div class="footer_line2">
        网易公司版权所有©1997-2020
        <a href="">ICP备案 粤B2-20090191-18</a>
        <span><img src="" alt=""></span>
        <a href="">粤公网安备 44010602006299</a>
        增值电信业务许可证
        <a href="">粤B2-20090191</a>
        <a href="">B2-20090058</a>
        （数据来源：艾媒邮箱报告）
      </div>
    </el-footer>
  </el-container>
</template>

<script>
import Http from '../api/Api'
import FormCheck from '../utils/formCheck'
export default {
  data () {
    // 自定义验证邮箱规则
    // var checkEmail = (rule, value, cb) => {
    //   const regEmail = /^([a-zA-Z0-9_-])+/
    //   if (regEmail.test(value)) {
    //     // 合法的邮箱
    //     return cb()
    //   }
    //   cb(new Error('请输入合法的邮箱'))
    // }
    // // 自定义验证手机号规则
    // var checkMobile = (rule, value, cb) => {
    //   const regMobile = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}/
    //   if (regMobile.test(value)) {
    //     // 合法的手机号
    //     return cb()
    //   }
    //   cb(new Error('请输入合法的手机号'))
    // }
    return {
      topNav: [
        { name: '企业邮箱', herf: 'https://qiye.163.com/?from=EMAIL_LOGIN' },
        { name: 'VIP邮箱', herf: 'https://vipmail.163.com/?from=fmail' },
        { name: '邮箱会员', herf: 'https://v.mail.163.com/?utm_source=emailloginnav' },
        { name: '海外用户登陆', herf: 'https://hw.mail.163.com/' },
        { name: '官方App', herf: 'http://mail.163.com/dashi/?from=mail32&gotodownload=1' },
        { name: '|', herf: 'http://mail.163.com/dashi/?from=mail32&gotodownload=1' },
        { name: '帮助', herf: 'https://help.mail.163.com/' },
        { name: '登陆反馈', herf: 'https://help.mail.163.com/newfeedback.do?m=add&id=31' }
      ],
      imgBox: [
        {
          id: 1,
          idView: require('../assets/1.png'),
          color: '#002A52',
          web: 'https://www.longines.cn/20seasons-greeting?utm_source=H5&utm_medium=H5&utm_campaign=2020rewarding&utm_content=163mail&mz_ca=2211638&mz_sp=7jHcv&mz_sb=1'
        },
        {
          id: 2,
          idView: require('../assets/2.png'),
          color: '#E7ECFE',
          web: 'https://v.mail.163.com/pay?utm_source=recordyunyinyue8'
        },
        {
          id: 3,
          idView: require('../assets/3.png'),
          color: '#FEF2E9',
          web: 'https://you.163.com/item/detail?id=1401005&from=out_ynzy_mailin_1'
        },
        {
          id: 4,
          idView: require('../assets/4.png'),
          color: '#EDC1A6',
          web: 'https://v.mail.163.com/?utm_source=LoginBackgroundShow'
        }
      ],
      ruleForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { validator: FormCheck.FormValidate.Form().Email, trigger: 'blur' }// 自定义校验规则
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { validator: FormCheck.FormValidate.Form().Password, trigger: 'blur' }
        ]
      },
      logintab: 'first',
      isCode: true,
      checked: false
    }
  },
  methods: {
    tabClick () {
      this.isCode = !this.isCode
    },
    loginClick () {
      const params = {}
      params.username = this.ruleForm.username
      params.password = this.ruleForm.password
      this.$refs.refForm.validate(async valid => {
        if (!valid) {
          return this.$message.error('请输入正确邮箱密码')
        }
        const { data: res } = await Http.getLogin('login', params)
        // console.log('data', res)
        if (res.meta.status !== 200) {
          // this.$store.state.httpError.statusText
          this.$message.error(res.meta.msg)
          return
        }
        const token = res.data.token
        window.sessionStorage.setItem('token', token)
        this.$router.push('/home')
      })
    }
  },
  created () {
    // console.log(FormCheck.FormValidate.Form())
  }
}
</script>
<style lang="less" scoped>
.el-container{
  height: 100%;
}

.header{
  display: flex;
  justify-content: space-between;
  padding: 0 40px;
  height: 74px !important;
  .top_left_container{
    height: 100%;
    display: flex;
    align-items: center;

    img{
      height: 62%;
    }
  }
  .top_right_container{
    display: flex;
    align-items: center;
    a{
      margin-right: 10px;
      font-size: 13px;
      color: gray;
      text-decoration: none;
    }
    a:hover{
      color:#000000;
    }
  }
}

.el-main{
  // background-color: darkorchid;
  padding: 0;
  flex:none;
  overflow: hidden;
  .imgBoxGo{
    width: 500px;
    height: 100%;
    position: absolute;
    // background-color: hotpink;
    left: 23%;
  }
  .el-carousel__item
  {
    img{
      width: 1100px;
      height: 640px;
      min-width: 1100px;
      min-height: 640px;
      padding-left: 300px;
    }
  }

  .main_form
  {
    background-color: #ffffff;
    position: absolute;
    top:125px;
    left:55%;
    z-index: 2;
    border-radius: 5px;
    width: 400px;
    height: 540px;

    .login_tab{
      position: absolute;
      right: 6px;
      top: 6px;
      // float: right;
      // margin-right: 6px;
      // margin-top: 6px;
      cursor: pointer;

      img{
        width: 50px;
        height: 50px;
      }
    }
    .mimaimg{
      position: absolute;
      right: 60px;
      top: 6px;
      width: 99px;
      height: 18px;
    }
    h3{
      text-align: center;
      margin:40px 0 0 0;
      // clear: both;
    }
    .login_form{
      padding: 0 40px;
      position: absolute;
      top: 20%;
      left: 0;
      right: 0;

      .el-button{
        width: 320px;
      }
      .login_days,.login_app
      {
        display: flex;
        justify-content: space-between;
      }
    }
    .login_guanggao
    {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 72px;
      background-color: #fafafa;
      img{
        display: block !important;
        width: 340px;
        height: 45px;
        margin-left: 45px;
        margin-top: 15px;
      }
      a{
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
    }
    .sao_div
    {
      width: 400px;
      padding: 50px 20px 0 20px;
      display: table-cell;
      text-align: center;
      vertical-align: center;
      img{
        // object-fit: cover;
        width: 120px;
        height: 120px;
      }
      div{
        margin-top: 10px;
        font-size: 14px;
        color: gray;
      }
    }
  }

}
.el-footer{
  height: 150px !important;
  margin-top: 30px;
  div{
    margin-top: 20px;
    font-size: 12px;
    color: gray;
    display: flex;
    justify-content: center;
    a{
      color: gray;
      margin-left: 10px;
    }
  }
  .footer_line1
  {
    a:after{
      content: "";
      display: inline-block;
      vertical-align: middle;
      margin-top: -2px;
      margin-left: 5px;
      width: 1px;
      height: 12px;
      background: #cecece;
    }
    a:last-child:after{
      display:none
    }
  }
}

</style>
